<template>
    <div>
        <list_search ref="list_search" @query="searchData"/>
        <el-table
            :data="tableData"
            row-key="id"
            border>
            <el-table-column prop="id" label="ID" width="60"/>
            <el-table-column prop="user_name" label="用户名" />
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="name" label="收获人姓名" />
            <el-table-column prop="phone" label="收获人电话" />
            <el-table-column prop="provinces" label="省/市/区">
                <template #default="scope">
                    {{ scope.row.provinces }} / {{ scope.row.city }} / {{ scope.row.area }}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="详细地址" />
            <el-table-column prop="is_default" label="默认" width="60">
                <template #default="scope">
                    {{ scope.row.is_default == 1 ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" width="165" :formatter="$func.tableTime"/>
            <el-table-column label="操作" width="140">
                <template #default="scope">
                    <el-button 
                        type="text" 
                        size="small" 
                        icon="Edit" 
                        @click="$refs.listCreate.Open({address:scope.row})" 
                        v-hasPerm="['users:address:update']">编辑</el-button>
                    <el-popconfirm 
                        v-hasPerm="['users:address:delete']" 
                        @confirm="deleteAddress(scope.row)"
                        :title="'确定删除地址 【' + scope.row.address + '】 ?'">
                        <template #reference>
                            <el-button type="text" size="small" icon="Delete">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <listCreate ref="listCreate" @refresh="initData"/>
        <page 
            :pageTotal="count"
            @get-list="searchPage"/>
    </div>
</template>
<script>
import list_search from './list_search.vue'
import page from '@/components/page.vue'
import listCreate from './list_create.vue'
export default {
    data() {
        return {
            tableData: [],
            count: 0,
            forms: {
                page: 1,
                limit: 10,
            },
        }
    },
    methods: {
        // 搜索数据
        searchData(res = {}){
            res.page = this.forms.page || 1
            res.limit = this.forms.limit || 10
            this.forms = res
            this.initData()
        },
        // 分页数据加载
        searchPage(res){
            this.forms.page = res.page
            this.forms.limit = res.limit
            this.initData()
        },
        // 初始化数据加载
        initData(){
            var that = this
            that.$http.get("/admin/user/address/list",{params: that.forms}).then(res=>{
                that.count = res.total
                that.tableData = res.data
            })
        },
        // 删除地址数据
        deleteAddress(row = {}){
            var that = this
            row.is_deleted = 1
            that.$http.post("/admin/user/address/create",{address: row}).then(res=>{
                that.$func.success("删除成功")
                that.initData()
            })
        },
    },
    mounted() {
        this.initData()
    },
    components: {
        list_search,
        page,
        listCreate,
    }
}
</script>
<style lang="scss" scoped>
.el-button--small{
    padding: 0px;
}
</style>